<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <style>
        html, body, .el-container {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .app {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .el-aside {
            height: 100%;
            width: 24% !important;
            background: right no-repeat url(./icon/index.png);
            background-size: auto 100%;
        }

        .el-main {
            height: 76%;
            flex: none;

        }

        .el-footer {
            height: 17% !important;
            flex: none;
            text-align: center;
            padding: 10px;
        }

        footer {
            font-size: 0.7vw;
            color: #333333;
            margin-bottom: 1.7vw;
        }

        footer .item {
            display: inline-block;
            margin-right: 3.3vw;
            font-size: .8vw;
        }

        footer .item:last-child {
            margin-right: 0;
        }

        footer .scan {
            margin-bottom: 1.5vw;
        }

        footer img {
            width: 4.8vw;
            height: 4.8vw;
        }


        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card {
            width: 75%;
            margin: auto;
            border-radius: 18px;

        }

        .el-row {
            padding-bottom: 35px;

        }

        .el-button {
            width: 23%;
            font-size: 16px;
        }

        .safe .el-button {
            color: #ffffff;
            background-color: #30BF6C;
        }

        .safe .el-button:focus {
            border-color: #c6e2ff;
            background-color: #8ed5ac;
        }

        .safe .el-button:hover {
            background-color: #8ed5ac;
        }


        .money .el-button {
            /*width: 240px;*/
            color: #ffffff;
            background-color: #2F9AED;
        }

        .money .el-button:focus, .el-button:hover {
            border-color: #c6e2ff;
            background-color: #7ab6e5;
        }

        .money .el-button:hover {
            background-color: #7ab6e5;
        }

        .industry .el-button {
            /*width: 240px;*/
            color: #ffffff;
            background-color: #E6B03C;
        }

        .industry .el-button:focus, .el-button:hover {
            border-color: #c6e2ff;
            background-color: #e5c582;
        }

        .industry .el-button:hover {
            background-color: #e5c582;
        }


    </style>
    <title>华普电力</title>
</head>

<body>
<div id="app" class="app">
    <el-container>
        <el-aside></el-aside>
        <el-container>
            <el-main>
                <el-row style="padding-top: 50px">
                    <el-card :body-style="{ padding: '0px' }" class="safe">
                        <img src="icon/安全用能.JPG" class="image">
                        <div style="padding: 14px;">
                            <a href="/plat/">
                                <el-button round>电力智能运维</el-button>
                            </a>
                            <a href="//">
                                <el-button round>电气火灾预警</el-button>
                            </a>
                            <el-button round disabled style="color: #30BF6C;background-color: #ffffff;">电能质量管理
                            </el-button>
                            <el-button round disabled style="color: #30BF6C;background-color: #ffffff;">用电安全测评
                            </el-button>
                        </div>
                    </el-card>
                </el-row>
                <el-row>
                    <el-card :body-style="{ padding: '0px' }" class="money">
                        <img src="icon/经济用能.JPG" class="image">
                        <div style="padding: 14px;">
                            <a href="/energy/">
                                <el-button round>电费分析</el-button>
                            </a>
                            <a href="/useEnergy/">
                                <el-button round>用能信息智能采集</el-button>
                            </a>
                            <el-button round disabled style="color: #2F9AED;background-color: #ffffff;">能源分级计量及结算
                            </el-button>
                            <el-button round disabled style="color: #2F9AED;background-color: #ffffff;">用能成本管控及能效提升
                            </el-button>
                        </div>
                        <div style="padding: 14px;">
                            <el-button round disabled style="color: #2F9AED;background-color: #ffffff;">重点能耗设备管理
                            </el-button>
                            <el-button round disabled style="color: #2F9AED;background-color: #ffffff;">能源交易辅助决策
                            </el-button>
                        </div>
                    </el-card>
                </el-row>
                <el-row>
                    <el-card :body-style="{ padding: '0px' }" class="industry">
                        <img src="icon/行业解决方案.JPG">
                        <div style="padding: 14px;">
                            <a href="http://192.168.60.22/#/dashboard">
                                    <el-button round>制药行业能源管理</el-button>
                            </a>
                        </div>
                    </el-card>
                </el-row>

            </el-main>
            <el-footer>
                <footer>
                    <div class="scan">
                        <div class="item">
                            <img src="./icon/二维码-公众号.png" alt="weixin">
                            <div>公众号</div>
                        </div>
                        <div class="item">
                            <img src="./icon/二维码-安卓app.png" alt="android">
                            <div>安卓端app</div>
                        </div>
                        <div class="item">
                            <img src="./icon/二维码-苹果app.png" alt="ios">
                            <div>苹果端app</div>
                        </div>
                    </div>
                    <div>版权所有 © 华普电力有限公司 2019-2020。 保留一切权利。</div>
                    <div><a href="http://www.beian.miit.gov.cn">渝ICP备17005035号</a></div>
                </footer>
            </el-footer>
        </el-container>
    </el-container>

</div>


</main>
</div>


<script>

    new Vue({
        el: '#app',
        data: {}, methods: {}
    })

</script>
</body>

</html>